<script setup>
import { ref } from 'vue'
import { listHistory } from '@/api/dashboard'
const popup = ref(null)
function open() {
  popup.value.open()
  listHistory({
    pageNum: 1,
    pageSize: 1000
  }).then((res) => {
    history.value = res.rows
  })
}
defineExpose({ open })
const history = ref([])
const activeIndex = ref(0)
function changeActive(index) {
  activeIndex.value = index
}
</script>

<template>
  <Popup width="1012" height="717.49" ref="popup" title="天台茶历史">
    <div class="box">
      <div class="line"></div>
      <ul>
        <li v-for="(item, index) in history" @click="changeActive(index)" :class="{ active: activeIndex == index }">
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <div class="right-box">
        <div class="photo">
          <img v-cover="history[activeIndex]?.photo" />
        </div>
        <p class="name">{{ history[activeIndex].name }}</p>
        <div class="content" v-html="history[activeIndex].brief"></div>
      </div>
    </div>
  </Popup>
</template>

<style lang="scss" scoped>
.right-box {
  margin-top: 16px;
  margin-left: 67px;
  .name {
    margin-top: 24px;
    height: 28px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #ffd90f;
    text-align: center;
  }
  .content {
    margin-top: 10px;
    width: 580px;
    height: 110px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    line-height: 19px;
    overflow-y: scroll;
  }
}
.photo {
  width: 580px;
  height: 344px;
  background: #1a445b;
  border-radius: 0px 0px 0px 0px;
  border: 2px solid;
  border-image: linear-gradient(156deg, rgba(19, 141, 229, 1), rgba(13, 81, 214, 1)) 2 2;
  padding: 10px;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.box {
  display: flex;
}
.line {
  width: 24px;
  height: 558px;
  background: url('/src/assets/img/history/line.png') no-repeat;
}
ul {
  margin: 15px 0 15px -15px;
  overflow: scroll;
  height: 525px;
  li {
    cursor: pointer;
    margin-bottom: 24px;
    width: 201.2px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    color: rgba(194, 222, 255, 0.8);
    font-family: PingFang SC, PingFang SC;
    background: url('/src/assets/img/history/no.png') no-repeat;
    &.active {
      color: #fff8c2;
      background: url('/src/assets/img/history/yes.png') no-repeat;
    }
    span {
      margin-left: 40px;
    }
  }
}
</style>
